<template>
  <div class="win">
    <!-- 新品推荐列表 -->
    <div v-if="type==1">
      <img v-if="banner" class="banner" :src="banner" mode="widthFix" />
      <div class="goods_box">
        <goods
          :goodsData="item"
          :type_mode="1"
          v-if="index<j&&index<goodsData.length"
          v-for="(item, index) in goodsData"
          :key="index"
          @goodsCk="addCar"
        />
      </div>
      <p class="word more" v-if="j<goodsData.length" @click="tapMore(index)">点击查看更多</p>
      <p class="word" v-else>到底了~</p>
    </div>
    <div v-if="type==2">
      <img v-if="banner" class="banner" :src="banner" mode="widthFix" />
      <div class="goods_box">
        <goods
          :goodsData="item"
          :type_mode="1"
          v-if="index<j&&index<goodsData.length"
          v-for="(item, index) in goodsData"
          :key="index"
          @goodsCk="addCar"
        />
      </div>
      <p class="word more" v-if="j<goodsData.length" @click="tapMore(index)">点击查看更多</p>
      <p class="word" v-else>到底了~</p>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      type: 0,
      banner: [], //顶部banner图
      goodsData: [],
      bannerType: "",
      j: 6
    };
  },
  methods: {
    // 请求接口banner
    getBanner(type) {
      if (type == 1) {
        this.bannerType = "socardRecommend";
      }
      if (type == 2) {
        this.bannerType = "socardSpecial";
      }
      this.$ajax("/home/home/banner", "post", {
        mark: this.bannerType
      })
        .then(res => {
          
          if (res.status) {
            this.banner = res.data[0].src;
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口商品
    getHomePro(type) {
      this.$ajax("/home/home/getHomePro", "post", {
        mark: type
      })
        .then(res => {
          if (res.status) {
            this.goodsData = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    // 点击查看更多
    tapMore(index) {
      this.j = this.j + 6;
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.j = this.j;
    this.type = e.type;
    this.getHomePro(this.type);
    this.getBanner(this.type);
  }
};
</script>

<style lang="scss" scoped>
.win {
  .banner {
    margin: 20rpx auto 0;
    width: 690rpx;
    border-radius: 20rpx;
  }
  .goods_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30rpx 20rpx;
  }
  .word {
    padding: 40rpx 0;
    text-align: center;
    font-size: 26rpx;
    color: $g9;
  }
  .more {
    color: $green;
    font-size: 32rpx;
    text-decoration: underline;
  }
}
</style>
